<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件化开发</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <!-- 定义的全局组件引用使用 -->
        <button-counter></button-counter>
        <!-- 使用驼峰命名的组件不能使用在非字符串模板地方 -->
        <!-- <HelloWorld></HelloWorld> -->
        <!-- 自定义标签 -->
        <hello-world></hello-world>
    </div>
    <script>
        // 组件的使用和其他自定义的指令或者过滤器类似，也是需要定义 包括全局定义或者局部定义

        // 1. data字段是一个函数 保证每个组件的作用域都是独立的
        Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            // 2. 组件模板只允许存在一个根元素 类似定义的app模板
            //3.  可以使用模板字符串的方式 实现模板 (esc键下面)``
            template: `
            <div>
                <button @click="handle">{{count}}</button>
                <HelloWorld></HelloWorld>
            </div>`
            ,
            methods: {
                handle: function () {
                    this.count++
                }
            },
        })

        Vue.component('HelloWorld', {
            data: function () {
                return {}
            },
            template: `<div>
                我是驼峰命名法表示的控件HelloWorld
                </div>`
        })

        Vue.component('hello-world', {
            data: function () {
                return {}
            },
            template: `<div>
                我是字段连接命名法表示的控件hello-world
                </div>`
        })

        // 这里其实也可以理解成是一个组件实例对象 不同的是data字段是一个对象
        var vm = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
            },
            components: {

            }
        })
    </script>
</body>

</html>



<!-- 组件化开发思想，把不同的功能封装到不同的组件中 然后通过组合的方式形成一个完整的应用  自定义标签-->